<template>
  <a-col class="colCsss" >
    <a-card title="交易记录明细" :bordered=false >
      <a-form class="orderForm">
        <a-form-item  label="商户订单号"    class="atFormItem">
          <span>{{list.outTradeNo}}</span>
        </a-form-item>
        <a-form-item  label="交易订单号"    class="atFormItem">
          <span>{{list.transactionId}}</span>
        </a-form-item>
        <a-form-item   label="商户名称"    class="atFormItem">
          <span>{{list.merchantName}}</span>
        </a-form-item>

        <a-form-item  label="门店名称"    class="atFormItem">
          <span>{{list.storeName}}</span>
        </a-form-item>
        <a-form-item  label="店员"    class="atFormItem">
          <span>{{list.orderCreateUserName}}</span>
        </a-form-item>

        <a-form-item   label="订单金额"    class="atFormItem">
          <span>{{list.memberTotalFee?list.memberTotalFee/100:0.00}}</span>
        </a-form-item>


        <a-form-item   label="支付状态"    class="atFormItem">
          <span>{{list.orderStatus|statusFilter}}</span>
        </a-form-item>

        <a-form-item   label="实收金额"    class="atFormItem">
          <span>{{list.settlementTotalFee?list.settlementTotalFee/100:0.00}}</span>
        </a-form-item>



        <a-form-item   label="支付方式"    class="atFormItem">
          <span>{{list.payType|payTypeFilter}}</span>
        </a-form-item>

        <a-form-item   label="实付金额"    class="atFormItem">
          <span>{{list.realPayFee?list.realPayFee/100:0.00}}</span>
        </a-form-item>



        <a-form-item   label="交易类型"    class="atFormItem">
          <span>{{list.tradeType|tradeTypeFilter}}</span>
        </a-form-item>

        <a-form-item   label="优惠金额"    class="atFormItem">
          <span>{{list.couponFee?list.couponFee/100:0.00}}</span>
        </a-form-item>

        <a-form-item   label="设备编号"    class="atFormItem">
          <span>{{list.deviceNo}}</span>
        </a-form-item>

        <a-form-item   label="创建时间"    class="atFormItem" >
          <span>{{list.createdTime}}</span>
        </a-form-item>

        <a-form-item   label="退款人"   style="margin-left: 29px;"  class="atFormItem" v-if="list.orderStatus==3">
          <span>{{list.orderRefundUserName}}</span>
        </a-form-item>

        <!--  返回按钮  -->
        <a-form-item>
          <a-col class="ant-pro-footer-toolbar" style="width: calc(100% - 74px);">
            <a-button @click="handleGoBack" style="float: right;margin-top:15px">返回</a-button>
          </a-col>
        </a-form-item>
      </a-form>
    </a-card>
  </a-col>

</template>

<script>

  export default {
    //--############  data() ###############-->
    data() {
      return {
        disabled:true,
        list:{},
      }
    },

    props:{
      record:Object
    },
    //--############  methods() ###############-->
   mounted(){
      this.$nextTick(()=>{
        if(this.record){
          console.log(this.record)
          this.list = this.record
        }
      })
   },
    methods: {
      //返回
      handleGoBack() {
        this.$emit('onGoBack')
      },
    },

    filters:{
      statusFilter(state) {
        const statusMap = {
          0: '未支付',
          1: '已支付',
          2: '支付失败',
          3: '已退款',
          4: '已撤销',
          5: '押金支付'
        }
        return statusMap[state]
      },
      payTypeFilter(type) {
        const statusMap = {
          1: '微信',
          2: '支付宝',
          3: '会员支付',
          4: '通用通'
        }
        return statusMap[type]
      },
      profitsFilter(type){
        const statusMap ={
          0:'未分账',
          1:'分账中',
          2:'分账成功',
          3:'分账失败'
        }

        return  statusMap[type]
      },

      tradeTypeFilter(type){
        const statusMap ={
          'FACEPAY':'人脸',
          'SCAN':'主扫',
          'SWEPT':'被扫',
          'DEPOSIT':'押金'
        }

        return  statusMap[type]
      },
    },
    //--############  methods() ###############-->
  }
</script>

<style scoped>

  .colCsss{
    margin-bottom: 20px;
    border: 1px solid #eee;
  }
  .orderForm{
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    margin: 10px auto;
    align-items: center;
  }
  .atFormItem{
    display: flex;
    width: 44%;
    padding: 10px;
    margin: auto;

  }
  .ant-pro-footer-toolbar{
    position: fixed;
    bottom: 0;
    right: 0;
    height: 56px;
    line-height: 56px;
    box-shadow:0 -1px 2px rgba(0,0,0,.03);
    background: #fff;
    border-top: 1px solid #e8e8e8;
    padding: 0 24px;
    z-index: 9;
  }
  .ant-pro-footer-toolbar  button{
    background-color: #1890FF;
  }
</style>
